<script setup lang="ts">
import {ref} from "vue";
import {debounce} from "@/utils/debounce.ts";
import SvgIcon from "@/components/common/SvgIcon.vue";
const props = defineProps({
  placeholder: {
    type: String,
    default: '请输入内容'
  },
  inputWidth: {
    type: String,
    default: '368px'
  },
  inputHeight: {
    type: String,
    default: '44px'
  },
  inputType: {
    type: String,
    default: 'text'
  },
  focusColor: {
    type: String,
    default: '#EB5C88'
  },
  context: String
});
const isShowPassword = ref(false)
const type = ref(props.inputType)
const emit = defineEmits(['update:context'])
const handleBlur = () => {
  // 失去焦点时的处理逻辑
  console.log('Blur event');
};
const handleInput = debounce((event: Event) => {
  // 输入内容时的处理逻辑
  emit('update:context',(event.target as HTMLInputElement).value)
}, 100);
const handleFocus = () => {
  // 获取焦点时的处理逻辑
  console.log('Focus event');
};
const showPassword = () => {
  isShowPassword.value = !isShowPassword.value
  type.value = isShowPassword.value ? 'text' : 'password'
}
</script>

<template>
  <div class="blog-input">
    <div class="blog-input-icon-left">
      <slot name="left-icon"></slot>
    </div>
    <input class="blog-input-content"
           :type="type"
           @focus="handleFocus"
           @blur="handleBlur"
           @input="handleInput"
           :placeholder="props.placeholder"
           :value="context"
    />
    <div v-if="inputType === 'password'" class="blog-input-icon-right"
         @click="showPassword">
      <SvgIcon class-name="icon" :icon-class="isShowPassword?'input-睁眼':'input-闭眼'"/>
    </div>
    <div v-if="inputType === 'code'" class="blog-input-right">
      <slot name="right-icon"></slot>
    </div>
  </div>
</template>

<style scoped lang="less">
.blog-input {
  width: v-bind(inputWidth);
  height: v-bind(inputHeight);
  box-sizing: border-box;
  border: 1px solid #e6e8eb;
  border-radius: 8px;
  display: flex;
  background-color: #ffffff;
  overflow: hidden;
  .blog-input-icon-left {
    margin: 14px 8px 14px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .blog-input-content {
    flex: 1;
    outline: none;
    border: none;
    background-color: inherit;
    font-size: 14px;
    &::placeholder{
      color: #C8C8C8;
    }
  }
  .blog-input-icon-right {
    margin: 14px 16px 14px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon{
      width: 16px;
      height: 16px;
      color: #C8C8C8;
    }
  }
  .blog-input-right {
    flex: 0.7;
  }
  &:focus-within {
    border-color: v-bind(focusColor);
  }
  &:hover {
    border-color: v-bind(focusColor);
  }
}
</style>
